<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 状态标签页 -->
    <!-- 需要从小程序改 -->
    <view class="bg-white p-3 sticky top-10 z-9">
      <view class="flex overflow-x-auto pb-2 gap-2">
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === 'all'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('all')"
          >所有</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === '0'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('0')"
          >待支付</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === '1'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('1')"
          >已支付</view
        >
        <view
          class="whitespace-nowrap px-4 py-2 rounded-full text-sm font-medium"
          :class="
            currentStatus === '5'
              ? 'bg-green-100 text-green-700'
              : 'bg-gray-100 text-gray-700'
          "
          @click="setCurrentStatus('5')"
          >已完成</view
        >
      </view>
    </view>

    <!-- 工单列表 -->
    <view class="m-3 rounded-lg overflow-hidden">
      <!-- 使用v-for动态渲染工单数据 -->
      <view
        v-for="order in workOrders"
        :key="order.id"
        class="p-4 last:border-b-0 mb-1 bg-white rounded"
        @click="orderInfo(order.id)"
      >
        <view class="flex justify-between items-start mb-2">
          <view class="font-medium">报修人: {{ order.user_name }}</view>
          <view :class="getStatusStyle(order.status)" class="text-sm">
            {{ getStatusText(order.status) }}
          </view>
        </view>
        <view class="grid grid-cols-2 gap-y-2 text-sm text-gray-600 mb-3">
          <view>资产名称: {{ order.asset_name }}</view>
          <view>工单编号: {{ order.order_id }}</view>
          <view>故障说明: {{ order.damage_desc }}</view>
          <view>报修地址: {{ order.location }}</view>
          <view>详细地址: {{ order.address_detail }}</view>
        </view>
        <view class="flex justify-between items-center text-xs text-gray-500">
          <view
            >发起时间:
            {{ dayjs(order.created_at).format('YYYY-MM-DD HH:mm:ss') }}</view
          >
          <view v-if="order.price" class="flex items-center gap-1">
            <text>{{ order.price }}</text>
            <i class="uil-user-circle"></i>
          </view>
          <view
            v-else-if="getStatusIcon(order.status)"
            :class="getStatusStyle(order.status)"
          >
            <i :class="getStatusIcon(order.status)"></i>
          </view>
        </view>
      </view>

      <!-- ✅ 空数据显示 -->
      <view
        v-if="workOrders.length === 0"
        class="flex flex-col items-center justify-center py-20 text-gray-400 text-sm"
      >
        <image
          src="/static/empty.png"
          class="w-[120rpx] h-[120rpx] mb-3 opacity-70"
          mode="aspectFit"
        />
        <text>暂无工单数据</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getOrder } from '@/api/order'
import { onShow } from '@dcloudio/uni-app'
import dayjs from 'dayjs'

// 工单数据
const workOrders = ref<RepairOrder[]>([])

const ruleMenu = uni.getStorageSync('rule')

// 导航到订单详情页
const orderInfo = (orderId: number) => {
  uni.navigateTo({
    url: '/pages/history/orderInfo?id=' + orderId
  })
}

// 获取状态样式
const getStatusStyle = (status: RepairOrder['status']) => {
  const styles = {
    0: 'text-red-500',
    1: 'text-orange-500',
    2: 'text-blue-500',
    3: 'text-gray-500',
    4: 'text-green-500',
    5: 'text-gray-400'
  }
  return styles[status as keyof typeof styles]
}

// 获取状态文本
const getStatusText = (status: RepairOrder['status']) => {
  const texts = {
    0: '待支付',
    1: '已支付',
    2: '已派单',
    3: '已接单',
    4: '进行中',
    5: '已完成'
  }
  return texts[status as keyof typeof texts]
}

// 获取状态图标
const getStatusIcon = (status: RepairOrder['status']) => {
  const icons = {
    0: '',
    1: 'uil-exclamation-circle',
    2: 'uil-spinner-alt animate-spin',
    3: 'uil-pause-circle',
    4: '',
    5: ''
  }
  return icons[status as keyof typeof icons]
}

// 当前状态
const currentStatus = ref<'all' | '0' | '1' | '5'>('all')

// 切换状态
const setCurrentStatus = async (status: 'all' | '0' | '1' | '5') => {
  currentStatus.value = status
  await getOrderList(status === 'all' ? undefined : status)
}

// 获取工单数据
const getOrderList = async (status?: '0' | '1' | '5') => {
  const formData: any = {
    page: 1,
    pageSize: 10,
    status
  }
  if (ruleMenu === 'user') {
    formData.user_id = uni.getStorageSync('user').id
  } else if (ruleMenu === 'master') {
    formData.master_id = uni.getStorageSync('user').id
  }
  console.log(formData)

  const res = await getOrder<typeof formData, RepairOrder>(formData)
  if (res.code === 200) {
    workOrders.value = res.data.items
  }
}

// 页面显示时获取数据
onShow(async () => {
  const cacheStatus = uni.getStorageSync('currentStatus')
  if (cacheStatus) {
    currentStatus.value = cacheStatus as 'all' | '0' | '1' | '5'
  }
  await getOrderList(
    currentStatus.value === 'all' ? undefined : currentStatus.value
  )
  uni.removeStorageSync('currentStatus')
})
</script>

<style lang="scss" scoped>
/* 自定义滚动条样式 */
::-webkit-scrollbar {
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>
